<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- 进度条 -->
			<view class="grace-space-between" style="margin-top: 16rpx;padding: 0 24rpx;">
				<view class="grace-flex-center" style="background-image:url(../../static/cloud_brush_danghang2.png);background-repeat: no-repeat; width: 350rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">1.支付信息</text>
				</view>
				<view class="grace-flex-center" style="background-image:url(../../static/cloud_brush_danghang1.png);background-repeat: no-repeat; width: 350rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">2.收款信息</text>
				</view>
			</view>

			<view style="margin: 31rpx auto;  width:702rpx;height:400rpx;box-shadow:0px 2rpx 6rpx 0px rgba(129,78,171,0.3);border-radius:10rpx;">
				<view style="width:702rpx;height:95rpx;background:rgba(255,255,255,1);border-radius: 20rpx 20rpx 0rpx 0rpx;">
					<text style="margin-left: 15rpx; line-height: 90rpx; font-size:36rpx;font-weight:bold;color:#1678FF;">支付信息</text>
				</view>

				<view class="grace-rows grace-flex-vcenter" style="margin:5rpx 0; width:702rpx;height:105rpx;background:rgba(255,255,255,1);"
				 @tap="showDialog1">
					<text style="margin-left: 19rpx;font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">支付账户:</text>
					<view class="grace-columns" style="text-align: center;">
						<view>
							<text style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">{{zhanghuneme}}</text>
							<image src="../../static/jiantou.png" style="width: 15rpx;height: 25rpx;position: relative;left: 120rpx;"></image>
						</view>
						<view style="width:549rpx;height:1rpx;background:rgba(51,51,51,1);opacity:0.5;margin-top: 13rpx;"></view>
					</view>
				</view>

				<view class="grace-rows grace-flex-vcenter" style="margin:5rpx 0; width:702rpx;height:105rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 19rpx;font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">支付金额:</text>
					<view class="grace-columns" style="text-align: center;">
						<view class="grace-flex-center">
							<text style="font-size:30rpx;font-weight:400;color:rgba(252,95,0,1);">￥</text>
							<input @input="diyongquan" v-model="pay_money" type="number" placeholder="请输入支付金额" placeholder-style="font-size: 26rpx;"
							 style="width: 210rpx;" />
						</view>
						<view style="width:549rpx;height:1rpx;background:rgba(51,51,51,1);opacity:0.5;margin-top: 10rpx;"></view>
					</view>
				</view>

				<view class="grace-rows grace-flex-vcenter" style="margin:5rpx 0; width:702rpx;height:105rpx;background:rgba(255,255,255,1);"
				 @tap="showDialog2">
					<text style="margin-left: 19rpx;font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">消费通道:</text>
					<view class="grace-columns" style="text-align: center;">
						<view>
							<text style="font-size:25rpx;font-weight:400;color:rgba(51,51,51,1);">{{tongdaoname}}</text>
							<image src="../../static/jiantou.png" style="width: 15rpx;height: 25rpx;position: relative;left: 120rpx;"></image>
						</view>
						<view style="width:549rpx;height:1rpx;background:rgba(51,51,51,1);opacity:0.5;margin-top: 13rpx;"></view>
					</view>
				</view>

				<view v-show="xianshi" class="grace-rows grace-flex-vcenter" style="margin:5rpx 0; width:702rpx;height:105rpx;background:rgba(255,255,255,1);border-radius: 0rpx 0rpx 20rpx 20rpx ;"
				 @tap="xuanzediyong">
					<text style="margin-left: 19rpx;font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">抵用券:</text>
					<view class="grace-columns" style="text-align: center;">
						<view style="position: relative;">
							<text style="font-size:30rpx;font-weight:bold;" :style="{color:coupon_id===''?'rgba(218,28,30,1)':'rgba(55,205,97,1)'}">{{coupon_id===''?'可抵扣'+max+'元，选择抵用券':'-'+max+'（已抵扣）'}}</text>
							<image src="../../static/jiantou.png" style=" width: 15rpx;height: 25rpx;position: absolute;left: 510rpx;"></image>
						</view>
						<view style="width:549rpx;height:1rpx;background:rgba(51,51,51,1);opacity:0.5;margin-top: 13rpx;"></view>
					</view>
				</view>
			</view>

			<button style="margin-top: 150rpx; width:500rpx;height:90rpx;background:#3187D5;box-shadow:0px 2rpx 5rpx 0px rgba(67,67,67,0.3);border-radius:20rpx;"
			 @tap="xiayibu"><text :style="{background:button_color}" class="button_color">下一步</text></button>
			 <!-- 云刷记录按钮 -->
			<image @tap="record" src="../../static/yunshuajilu.png" style="width:170rpx;height: 170rpx;position: relative;margin-left: 550rpx;margin-top: 20rpx; "></image>
			<!-- <view style="text-align: center;font-size: 28rpx;color: rgba(252,95,0,1);;">
				<text style="display: block;">如 果 几 分 钟 内 信 用 卡 未 扣 款</text>
				<text>说 明 消 费 失 败 请 更 换 通 道 重 刷</text>
			</view> -->
			<!-- 支付账户遮罩 -->
			<graceBottomDialog :show="show1" @closeDialog="closeDialog1">
				<view slot="btns">
					<view style="height: 80rpx;line-height: 80rpx;">
						<view class="grace-flex-center">
							<text style="font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">选择支付账户</text>
							<view style="position: relative;left: 230rpx;top: 5rpx;" @tap="closeDialog1">
								<image src="../../static/quxiao.png" style="width: 30rpx;height: 30rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<view slot="content">
					<scroll-view class="grace-scroll-y" scroll-y style="height: 400rpx;">
						<view v-for="(itme,index) in zhifuzhanghu_list" :key="index" @tap="genghuanzhifuzhanghu([itme])" class="grace-rows grace-flex-vcenter"
						 style="height: 80rpx;border-bottom: 2rpx solid #F7F7F7; ">
							<image :src="itme.bankinfo.bank_icon_color" style="width: 38rpx;height: 38rpx;margin-left: 30rpx;"></image>
							<text style="margin-left: 25rpx; font-size:28rpx;font-weight:400;color:rgba(0,0,0,1);">{{ itme.name }}（{{itme.bc_bank_number.last}}）</text>
						</view>
						<view @tap="tianjx" class="grace-rows grace-flex-vcenter" style="height: 80rpx;">
							<image src="../../static/tianjia.png" style="width: 38rpx;height: 38rpx;margin-left: 30rpx;"></image>
							<text style="margin-left: 25rpx; font-size:30rpx;font-weight:400;color:rgba(0,0,0,1);">添加信用卡</text>
						</view>
					</scroll-view>
				</view>
			</graceBottomDialog>

			<!-- 消费通道遮罩 -->
			<graceBottomDialog :show="show2" @closeDialog="closeDialog2">
				<view slot="btns">
					<view style="height: 90rpx;line-height: 80rpx;">
						<view class="grace-flex-center">
							<text style="font-size:32rpx;font-weight:400;color:rgba(0,0,0,1);">选择刷卡通道</text>
							<view style="position: relative;left: 230rpx;top: 5rpx;" @tap="closeDialog2">
								<image src="../../static/quxiao.png" style="width: 30rpx;height: 30rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<view slot="content">
					<scroll-view class="grace-scroll-y" scroll-y style="height: 700rpx;">
						<view @tap="qiehuantongdao(itme,false)" v-for="(itme,index) in shuakatongdao_list" :key="index" class="grace-rows grace-flex-vcenter"
						 style="border-bottom: 1rpx solid #F7F7F7;margin-top: 10rpx;">
							<image src="../../static/yinlian.png" style="width: 100rpx;height: 62rpx;margin-left: 41rpx;"></image>
							<view class="grace-columns" style="margin-left: 44rpx;margin-bottom: 10rpx;">
								<text style="font-size:28rpx;font-weight:bold;color:rgba(51,51,51,1);">{{ itme.alias}}</text>
								<text style="font-size:22rpx;font-weight:400;color:rgba(51,51,51,1);">单笔限额{{ itme.danbi }}元
									单日限额{{ itme.ri_quota }}</text>
								<text style="font-size:22rpx;font-weight:400;color:rgba(225,8,8,1);">费率：{{ itme.kehu_feilv }}元</text>
							</view>
							<view style="margin-left: 100rpx;" v-show="itme.kaitong==0">
								<text style="font-size:26rpx;font-weight:400;color:rgba(220,0,0,1);">点击开通</text>
							</view>
							<view style="margin-left: 100rpx;" @tap="radioChange(index)" v-if="itme.is_tuijian==1&&xuan">
								<image src="../../static/yixuan.png" mode="" style="width: 30rpx;height: 30rpx;position: absolute;"></image>
								<!-- <text style="font-size:26rpx;font-weight:400;color:rgba(35,183,20,1);">{{yixuan}}</text> -->
							</view>
							<view style="margin-left: 100rpx;" @tap="radioChange(index)" v-else v-show="itme.kaitong!==0">
								<image src="../../static/weixuan.png" mode="" style="width: 30rpx;height: 30rpx;position: absolute;"></image>
								<!-- <text style="font-size:26rpx;font-weight:400;color:rgba(220,0,0,1);">{{weixuan}}</text> -->
							</view>
						</view>
					</scroll-view>
				</view>
			</graceBottomDialog>

			<!-- 鉴权 -->
			<graceDialog :isTitle="false" :show="show3" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<text style="font-size: 26rpx;">验证码已发送至您</text></br>
					<text style="font-size: 24rpx;">尾号{{ yuliushouji }}的手机</text>
					<input v-model="yanzhengma" style="margin-top: 20rpx; height: 80rpx; border-bottom:#B2B2B2 solid 2rpx" placeholder="请输入验证码" />
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog3">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm3">确认</text>
				</view>
			</graceDialog>
			<!-- 鉴权 -->

		</view>
	</gracePage>
</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceBottomDialog from '../../graceUI/components/graceBottomDialog.vue';
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				coupon: '',
				max: 0, // 抵用券最大金额
				coupon_id: '', //抵用券id
				zhanghuneme: '请选择信用卡',
				tongdaoname: '暂无消费通道请开通',
				channel_id: '', //通道id
				bc_id: '', //信用卡id
				zhifuzhanghu_list: [], // 信用卡数据列表
				zhifuzhanghu: [],
				shuakatongdao_list: [],
				pay_money: '',
				kaitong: '',
				show1: false,
				show2: false,
				// 鉴权
				show3: false,
				yanzhengma: '', //验证码
				yuxuantongdao_id: '',
				yuliushouji: '', //预留手机
				order_num: '', //订单号
				xianshi: false ,// 模块判断是否显示抵用券
				yixuan: '已选择',
				weixuan: '请选择',
				xuan: false,
			}
		},
		onLoad: function() {
			this.Payment()
			// 模块判断
			var xianshi = this.getModels('3');
			if (xianshi) {
				this.xianshi = true
			}
		},
		onShow:function(){
			this.Payment()
			var xianshi = this.getModels('3');
			if (xianshi) {
				this.xianshi = true
			}
			this.button_color = uni.getStorageSync('button_color');
		},
		// onUnload() {
		// 	uni.navigateTo({
		// 		url: '/pages/index/index1'
		// 	})
		// },
		methods: {
			// 获取支付账户银行数据
			Payment(){
				const vm = this
				this.myPost(
					 'api/cardapi/get_card_list', {
						 type: '信用卡'
					 },
					function(res) {
						console.log(res);
						if(res.code == 200){
							vm.zhifuzhanghu_list = res.data;
							vm.genghuanzhifuzhanghu(vm.zhifuzhanghu_list);
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			},
			// 添加信用卡页面跳转事件
			tianjx(){
				uni.navigateTo({
					url:'/pages/card/add_credit_card1?types=1,2,3,4,5'
				})
			},
			// 抵扣券选择事件
			xuanzediyong() {
				if (this.pay_money === '') {
					uni.showToast({
						title: '请填写支付金额',
						icon: 'none'
					})
					this.max = 0
				} else {
					uni.$once('xuanzediyongquan', this.diyong);
					var datas = {
						coupons: this.max,
						poundage: this.shouxufeilv,
						card_id: this.bc_id,
						money: this.pay_money,
						yewu_id: this.channel_id
					}
					uni.setStorageSync('obj',datas)
					uni.navigateTo({
						url: '/pages/Cloud_brush/yunshu_voucher'
					})
					
				}
			},
			diyong(data) {
				if (data.coupon_id === '') {
					this.coupon_id = data.coupon_id;
					this.coupon = '';

				} else {
					this.coupon_id = data.coupon_id;
					this.coupon = this.max;
				}

			},
			// 通道选择事件
			radioChange(item) {
				console.log(item);
				var shuakatongdao_list = this.shuakatongdao_list;
				var that = this;
				var newshuakatongdao_list = [];
				this.each(shuakatongdao_list,function(i,v){
					
					if (i.id === shuakatongdao_list[item].id) {
						i.is_tuijian = 1
						that.xuan = true
					} else{
						i.is_tuijian = 0
					}
					newshuakatongdao_list.push(i);
					console.log(newshuakatongdao_list);
				})
				that.shuakatongdao_list = newshuakatongdao_list
			},
			// 下一步按钮
			xiayibu() {
				if (this.pay_money === '') {
					uni.showToast({
						title: '请将信息补充完整！',
						icon: 'none'
					})
					return
				}
				if (this.bc_id === '') {
					uni.showToast({
						title: '请将信息补充完整！',
						icon: 'none'
					})
					return
				}
				if (this.zhanghuneme === '请选择信用卡') {
					uni.showToast({
						title: '请将信息补充完整！',
						icon: 'none'
					})
					return
				}
				if (this.channel_id === '') {
					this.show2 = true;
					return
				}
				var vm = this
				if(this.xianshi == true){
					uni.showModal({
					  title: '提示',
					  content: '你没有选择抵扣券!',
					  cancelText: '去选择',
					  confirmText: '不需要',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url:'/pages/Cloud_brush/cloud_brush2?card_id='+ vm.bc_id + '&coupons=0' + '&money=' + vm.pay_money + '&yewu_id=' + vm.channel_id
								})
								vm.pay_money = ''
					        } else if (res.cancel) {
								vm.xuanzediyong()
								vm.pay_money = ''
					        }
					    }
					});
				}else{
					uni.navigateTo({
						url:'/pages/Cloud_brush/cloud_brush2?card_id='+ vm.bc_id + '&coupons=' + vm.max + '&money=' + vm.pay_money + '&yewu_id=' + vm.channel_id
					})
				vm.pay_money = ''
				}
				
				
			},
			// 跳转云刷记录页面事件
			record(){
				uni.navigateTo({
					url: '/pages/Cloud_brush/credit_card_record'
				})
			},
			//抵用券
			diyongquan(val) {
				console.log(val);
				var vm = this;
				var money = val.target.value;
				if (parseFloat(money) > 0) {
					vm.myPost(
						'api/cloudbrush/get_cloud_brush', {
							money: money,
							card_id: vm.bc_id,
							yewu_id: vm.channel_id
						},
						function(res) {
							console.log(res);
							if(res.code == 200){
								vm.max = res.data.max_coupons;
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
							
						}
					)
				}else{
					vm.max = 0
				}

			},
			// 云刷通道id鉴权
			jianquan_id(yinhangkaid, tongdaoid, type) {
				if (type === '云刷') {
					var vm = this;
					vm.myPost(
						'api/cloudbrush/opening_cloud_brush', {
							card_id: yinhangkaid,
							yewu_id: tongdaoid
						},
						function(res) {
							console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								vm.tongdao();
							} else{
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}
					)
				}

			},
			// 显示验证码输入框
			showDialog3: function() {
				this.show3 = true;
			},
			// 关闭输入框
			closeDialog3: function() {
				this.show3 = false;
			},
			// 验证码输入框选择了确认
			confirm3: function() {
				if (this.yanzhengma === '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else {
					var vm = this;
					vm.myPost(
						'api/mypassageway/confirm_open_channel', {
							bind_num: this.order_num,
							cms: this.yanzhengma,
						},
						function(res) {
							if(res.code==200){
								vm.closeDialog3();
								vm.tongdao();
							}else{
								vm.closeDialog3();
								uni.showToast({
									title:res.msg,
									icon: 'none'
								})
							}
						}
					)
				}
			},
			// 获取云刷通道列表数据
			tongdao() {
				if (this.bc_id) {
					var vm = this
					this.myPost(
						'api/mypassageway/get_pass_list', {
							card_id: this.bc_id,
							type: '云刷'
						},
						function(res) {
							if(res.code == 200){
								vm.shuakatongdao_list = res.data.list
								vm.qiehuantongdao(vm.shuakatongdao_list[0], true)
								vm.shuakatongdao_list[0].is_tuijian = 1;
								vm.xuan = true;
							}else{
								uni.showToast({
									title:res.msg,
									icon: 'none'
								})
							}
							
						})
				}

			},
			// 切换通道事件
			qiehuantongdao(item, type) {
				this.channel_id = item.id
				if (type) {
					if (item.kaitong === 0) {
						this.tongdaoname = '请选择通道'
					} else {
						this.channel_id = item.id
						this.tongdaoname = item.alias + '(' + item.kehu_feilv +')'
						this.closeDialog2()
					}
				} else {
					if (item.kaitong === 0) {
						this.yuxuantongdao_id = item.id;
						this.jianquan_id(this.bc_id, this.yuxuantongdao_id, '云刷');
						// this.tongdaoname='请选择通道'
						// this.closeDialog2()
					} else {
						this.channel_id = item.id
						this.tongdaoname = item.alias + '(' + item.kehu_feilv +  ')'
						this.closeDialog2()
					}
				}


			},
			// 更换支付账户事件
			genghuanzhifuzhanghu(item) {
				if (item.length === 0) {
					this.zhanghuneme = '请添加信用卡';
				} else {
					console.log(item);
					this.zhanghuneme = item[0].name + '（' + item[0].bc_bank_number.last + '）'
					this.bc_id = item[0].id;
					// 换通道
					this.tongdao()
				}
				this.show1 = false;
			},
			showDialog1() {
				this.show1 = true;
			},
			closeDialog1() {
				this.show1 = false;
			},
			showDialog2() {
				// this.tongdao();
				this.show2 = true;
			},
			closeDialog2() {
				this.show2 = false;
			}
		},
		components: {
			graceDialog,
			gracePage,
			graceBottomDialog
		}
	}
</script>

<style>
	.button_color{
		font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);
	}
	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}
</style>
